<template>
  <div id="app">
    <!-- <div class="header">
      <img src="@/assets/images/linyishouye.jpg" alt="University Header" class="header-image">
    </div> -->
    <div class="main-content">
      <div class="sidebar">
        <div class="app-container" style="height: 100%">
          <el-row style="height: 100%">
            <el-col :span="24" :xs="12" style="height: 100%">
              <el-card class="box-card" style="height: 100%">
                <!-- <div slot="header" class="clearfix">
                  <span>个人信息</span>
                </div> -->
                <div class="w100 bgff br-20 pt-20 pb-10">
                  <div class="rows rowsm mb-10">
                    <!-- <img src="../../assets/icons/svg/headImage.jpeg" alt="" /> -->
                    <i class="el-icon-user-solid fs-20" style="margin-right: 5px; color: #e33636;"></i>
                    <div class="fw-b fs-18">个人信息</div>
                  </div>
                </div>
                <div>
                  <div class="text-center list-group-item" style="border-bottom: 0;">
                    <userAvatar :user="user" />
                  </div>
                  <ul class="list-group list-group-striped">
                    <li class="list-group-item" style="border-bottom: 0;">
                      <svg-icon icon-class="user" />姓名
                      <div class="pull-right">{{ user.nickName }}</div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0;">
                      <svg-icon icon-class="email" />教工号
                      <div class="pull-right">{{ user.jsNumber }}</div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0;">
                      <svg-icon icon-class="email" />学院
                      <div class="pull-right" v-if="user">{{ user.xyName }}</div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0;">
                      <svg-icon icon-class="phone" />手机号
                      <div class="pull-right">{{ user.phonenumber }}</div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0;">
                      <svg-icon icon-class="peoples" />性别
                      <div class="pull-right">{{ getFormattedSex(user.sex) }}</div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0;">
                      <svg-icon icon-class="peoples" />角色
                      <div class="pull-right">{{ roleGroup }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="tree" />状态
                      <div class="pull-right">{{ getFormattedStatus(user.status) }}</div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="content app-container">
        <div class="notifications1">
          <el-card class="box-card" style="height: 100%">
            <div class="w100 bgff br-20 pt-20 pb-10">
              <div class="rows rowsm mb-10">
                <img src="../../assets/icons/svg/img.png" class="w-20 h-22 mr-10" alt="" />
                <div class="fw-b fs-18">实践报告待审核</div>
              </div>
            </div>

            <div class="content1">
              <div class="approval-table">
                <div class="approval-header">
                  <span>学生姓名</span>
                  <span>学号</span>
                  <span>实践课程</span>
                  <span>时间</span>
                  <span>状态</span>
                  <span>操作</span>
                </div>
                <div class="approval-item" v-for="(item, index) in approvalList" :key="index">
                  <span>{{ item.studentName }}</span>
                  <span>{{ item.stNumber }}</span>
                  <span>{{ item.taskType == 1 ? '劳动教育' : item.taskType == 2 ? '职业素养' : item.taskType == 3 ?
                    '应急安全' : item.taskType == 4 ? '思政实践' : '创新创业' }}</span>
                  <span>{{ item.createTime.slice(0, 16) }}</span>
                  <span>{{ item.status == 1 ? '未审核' : '审核通过' }}</span>
                  <div class="empty">
                    <button v-show="item.status == 1" v-hasPermi="['practice:user:collegeCheck']" @click="review(item)"
                      class="review-button">审核</button>
                  </div>
                </div>
                <div v-if="approvalList.length == 0" style="text-align: center;margin-top: 50px;">
                  暂无数据
                </div>
              </div>
            </div>
            <pagination v-show="total > 0" :total="total" layout="total, prev, pager, next"
              :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getExaminationApproval" />
          </el-card>
        </div>
        <div class="notifications">
          <el-card class="box-card" style="height: 100%">
            <div class="w100 bgff br-20 pt-20 pb-10">
              <div class="rows rowsm mb-10">
                <img src="../../assets/icons/svg/icon_gg.png" class="w-20 h-22 mr-10" alt="" />
                <div class="fw-b fs-18">通知公告</div>
              </div>
            </div>
            <div class="content1">
              <div class="approval-table">
                <div class="approval-header">
                  <span>公告标题</span>
                  <span>创建时间</span>
                </div>
                <div class="approval-table-height">
                  <div class="w100 rowsb rowsm mb-24 pointer" v-for="(item, index) in newsList" :key="index">
                    <div style="width: 60%;" class="one_overflow fs-16 col333" @click="openNotificationModal(item)">
                      {{ item.name }}</div>
                    <div class="fs-12 col888">{{ item.createTime }}</div>
                  </div>
                </div>
                <div v-if="newsList.length == 0" style="text-align: center;margin-top: 50px;">
                  暂无数据
                </div>
              </div>
            </div>
            <pagination layout="total, prev, pager, next" v-show="paginationNews.total > 0" :total="paginationNews.total"
              :page.sync="paginationNews.pageNum" :limit.sync="paginationNews.pageSize" @pagination="getNewsLists" />
          </el-card>
        </div>

        <div v-if="showNotificationModal" class="notification-modal">
          <div class="modal-header">
            <div class="modal-title">{{ notificationTitle }}</div>
            <button @click="closeNotificationModal" class="close-button">X</button>
          </div>
          <div class="modal-body" v-html="notificationContent"></div>
        </div>
      </div>
    </div>
    <el-dialog title="实践报告审核" :visible.sync="open" width="60%" append-to-body center class="dialogClass">
      <el-form label-position="right">
        <el-row>
          <el-card>
            <el-col :span="8">
              <el-form-item label="任务名称: ">
                <span>{{ form.taskName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践课程: ">
                <span>{{ form.taskType == 1 ? '劳动教育' : form.taskType == 2 ? '职业素养' : form.taskType == 3 ?
                  '应急安全' : form.taskType == 4 ? '思政实践' : '创新创业' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="积分上限: ">
                <span>{{ form.pointsCap }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="">
                <div class="inforClass">学生信息</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名: " label-width="50px">
                <el-input v-model="form.studentName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学号: " label-width="50px">
                <el-input v-model="form.stNumber" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学院: " label-width="50px">
                <el-input v-model="form.xyName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业: " label-width="50px">
                <el-input v-model="form.zyName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班级: " label-width="50px">
                <el-input v-model="form.bjName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年级: " label-width="50px">
                <el-input v-model="form.njName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-card>
          <el-card style="margin-top: 5px;margin-bottom: 5px;">
            <el-col :span="24">
              <el-form-item label="">
                <div class="inforClass">报告信息</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践报告名称: " label-width="110px">
                <el-input v-model="form.projectName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践开始时间: " label-width="110px">
                <el-input v-model="form.practiceStartTime" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践结束时间: " label-width="110px">
                <el-input v-model="form.practiceEndTime" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实 践 地 点: " label-width="110px">
                <el-input v-model="form.practicePlace" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报 告 状 态: " label-width="110px">
                <el-input v-model="form.statusType" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="实践详细说明: " label-width="110px">
                <el-input v-model="form.detail" readonly resize="none" type="textarea"
                  :autosize="{ minRows: 2, maxRows: 3 }" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.status == '4'">
              <el-form-item label="驳回原因: " label-width="110px">
                <el-input v-model="form.reason" resize="none" type="textarea" readonly
                  :autosize="{ minRows: 2, maxRows: 3 }" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="填 报 附 件: " label-width="110px">
                <div class="fileImage">
                  <div v-for="item in form.studentFileList" :key="item.id">
                    <img :src="item.fileSrc" alt=""
                      v-if="item.fileType == 'png' || item.fileType == 'jpg' || item.fileType == 'jpeg' || item.fileType == 'able' || item.fileType == '图片'"
                      class="w-100 h-150 mr-20 one_overflow w-136 fs-140 col333 pointer" @click="download(item.fileSrc)" />
                    <video :src="item.fileSrc" controls
                      v-if="item.fileType == 'mp4' || item.fileType == 'avi' || item.fileType == '视频'"
                      class="w-100 h-150 mr-20 one_overflow w-136 fs-140 col333 pointer" />
                    <div class="one_overflow w-200 fs-14 col333 pointer"
                      v-if="item.fileType != 'png' && item.fileType != 'jpg' && item.fileType != 'jpeg' && item.fileType != 'able' && item.fileType != 'mp4' && item.fileType != 'avi' && item.fileType != '图片' && item.fileType != '视频'"
                      @click="downloadFile(item)">{{ item.fileName }}</div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.status == '1'">
              <el-form-item label="评 语: " label-width="110px">
                <el-input v-model="form.remark" resize="none" :placeholder="form.status != '1' ? '' : '选填'"
                  type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="form.status != '1'" />
              </el-form-item>
            </el-col>
          </el-card>
          <el-card style="padding-bottom: 10px;">
            <el-col :span="24">
              <el-form-item label="">
                <div class="inforClass">审核过程</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-steps :active="active" align-center>
                <el-step v-for="(item, index) in activeList" :title="item.title">
                  <template #description>
                    <div class="custom-step-desc">{{ item.time }}</div>
                    <div v-if="index == 1" class="custom-step-desc"> 审核人: {{ form.collegeCheckName }}</div>
                    <div v-if="form.remark && index == 1" class="custom-step-desc">{{ form.remark }}</div>
                  </template>
                </el-step>
              </el-steps>
            </el-col>
          </el-card>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDelete(form)">驳 回</el-button>
        <el-button type="primary" @click="submitForm">通 过</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import axios from 'axios';
import { checkPass } from "@/api/task/audit";
import { getHomeListTaks } from "@/api/task/index";
import { listPronotice } from "@/api/project/pronotice";
import { getUserProfile } from "@/api/system/user";
import userAvatar from "@/views/system/user/profile/userAvatar";
import userInfo from "@/views/system/user/profile/userInfo";
import resetPwd from "@/views/system/user/profile/resetPwd";

export default {
  name: "App",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pagination: {
        pageNum: 1,
        pageSize: 5, // 每页显示的条数
        totalPages: 0
      },
      paginationNews: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      total: 0,
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
      notifications: [],
      newsList: [],
      showNotificationModal: false, // 控制弹窗显示的状态
      notificationTitle: '系统维护通知', // 通知公告的标题
      notificationContent: '',

      approvalList: [],

      // 是否显示弹出层
      open: false,
      activeList: [],
      active: 1,

      fielHttp: process.env.VUE_APP_BASE_FILE, // 图片前缀
      form: {},
    };
  },

  computed: {
    totalPages() {
      return this.paginationNews.pageNum === Math.ceil(this.paginationNews.totalPages / this.paginationNews.pageSize);
    },
    paginationTotalPages() {
      return this.pagination.pageNum === Math.ceil(this.pagination.totalPages / this.pagination.pageSize);
    },
  },
  watch: {},
  created() {
    this.getUser();
    this.getNewsLists();
    this.getExaminationApproval();
  },
  methods: {

    async fetchImage(urls, index) {
      const that = this;
      try {
        const response = await axios.get(this.fielHttp + urls, {
          responseType: 'arraybuffer' // 获取二进制数据
        });
        // 将二进制数据转换为 Base64 格式
        const blob = new Blob([response.data], { type: 'image/jpeg' });
        const imageUrl = URL.createObjectURL(blob);
        // this.fileSrc = imageUrl; // 确保 this 指向正确的上下文
        that.form.studentFileList[index].fileSrc = imageUrl;
        that.$forceUpdate();
      } catch (error) {
        console.error('Failed to fetch image:', error);
      }
    },
    openNotificationModal(item) {
      this.notificationTitle = item.name
      this.notificationContent = item.content
      this.showNotificationModal = true; // 打开弹窗
    },
    closeNotificationModal() {
      this.showNotificationModal = false; // 关闭弹窗
    },

    // 通知公告
    getNewsLists() {
      listPronotice(this.paginationNews).then(response => {
        if (response.code !== 200) {
          return this.$notify({
            title: "提示",
            message: response.msg,
          });
        }
        this.newsList = response.rows;
        this.paginationNews.total = response.total
      });
    },

    getExaminationApproval() {
      getHomeListTaks(this.queryParams).then(response => {
        this.approvalList = response.rows;
        this.total = response.total
      });
    },

    getFormattedSex(sex) {
      const sexMap = { 0: '男', 1: '女' };
      return sexMap[sex] || '未知'; // 如果sex不是1或2，显示'未知'
    },

    getFormattedStatus(number) {
      const statusMap = { 0: '正常', 1: '停用' };
      return statusMap[number] || '未知'; // 如果sex不是1或2，显示'未知'
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },

    download(url) {
      // window.open(this.fielHttp + url);
      window.open(url);
    },
    async downloadFile(item) {
      if (item.fileType == 'pdf' || item.fileName.split('.')[item.fileName.split('.').length - 1] == 'pdf') {
        try {
          const response = await fetch(process.env.VUE_APP_BASE_FILE + item.file);
          const blob = await response.blob();

          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob); // 创建对象 URL
          link.download = item.fileName; // 设置下载文件名
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          URL.revokeObjectURL(link.href); // 释放对象 URL
        } catch (error) {
          console.error("下载失败：", error);
        }
      } else {
        const link = document.createElement("a");
        link.href = process.env.VUE_APP_BASE_FILE + item.file; // 文件路径
        link.download = item.fileName; // 下载后的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },

    // 审核方法
    review(item) {
      this.form = item;
      this.$nextTick(() => {
        this.form.studentFileList.forEach((item, fileIndex) => {
          this.fetchImage(item.file, fileIndex)
        })
      })
      this.form.statusType = this.form.status == 1 ? '未审核' : this.form.status == 2 ? '审核通过' : '已驳回';
      this.activeList = [];
      const timeFields = [
        { key: 'createTime', title: '提交时间', activeValue: 1 },
        { key: 'collegeCheckTime', title: this.form.status == 4 && !this.form.schoolCheckTime ? '驳回时间' : '审核时间', activeValue: 2 },
      ];

      timeFields.forEach(field => {
        if (this.form[field.key]) {
          this.active = field.activeValue;
          this.activeList.push({ title: field.title, time: this.form[field.key] });
        }
      });
      this.open = true;
    },
    getDate() {
      const now = new Date();
      const year = now.getFullYear();  // 获取年份
      const month = String(now.getMonth() + 1).padStart(2, '0');  // 获取月份，月从 0 开始，所以需要加 1，使用 padStart 补充零
      const day = String(now.getDate()).padStart(2, '0');  // 获取日期，使用 padStart 补充零
      const hours = String(now.getHours()).padStart(2, '0');  // 获取小时，补充零
      const minutes = String(now.getMinutes()).padStart(2, '0');  // 获取分钟，补充零
      const seconds = String(now.getSeconds()).padStart(2, '0');  // 获取秒数，补充零
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认驳回学生"' + row.studentName + '"的实践报告？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showInput: true,  // 启用输入框
        inputPlaceholder: '请输入驳回原因',  // 输入框提示文本
      }).then(input => {
        if (!input.value) {
          this.$modal.msgWarning("请添写驳回理由!")
          this.handleDelete(row)
          return
        };
        const timeType = row.status == 1 ? 'collegeCheckTime' : 'schoolCheckTime';
        checkPass({ ids: [row.id], status: 4, reason: input.value, [timeType]: this.getDate() }).then(() => {
          this.form = {};
          this.open = false;
          this.getExaminationApproval();
          this.$modal.msgSuccess("驳回成功");
        });
      }).catch(() => { });
    },
    /** 提交按钮 */
    submitForm() {
      checkPass({ ids: [this.form.id], status: this.form.status == 1 ? 2 : 3, remark: this.form.remark }).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("审核成功");
          this.form = {};
          this.getExaminationApproval();
          this.open = false;
        }
      })
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.getExaminationApproval();
      this.form = {}
    },
  }
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  height: 88vh;
  margin: 0;
  padding: 0;
}

.clearfix {
  font-size: 18px;
  font-weight: bold;
}

.header {
  width: 100%;
}

.header-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 30px
}

.app-container {
  padding: 20px;
  padding-left: 10px;
  padding-right: 0;
  background-color: #ffffff;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 320px;
  /* 根据需要调整宽度 */
  background-color: #ffffff;
  /*padding: 20px;*/
  box-sizing: border-box;
  overflow-y: auto;
}


.content {
  flex: 1;
  overflow-y: auto;
}

.menu-item {
  padding: 22px;
  background-color: #4e6896;
  color: white;
  text-decoration: none;
  border-radius: 22px;
  flex-grow: 5;
  text-align: center;
}

.menu {
  display: flex;
  flex-direction: column;
  padding-top: 45px
}

.menu-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}


.logo {
  text-align: center;
  margin-bottom: 0px;
}

.logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.user-info {
  margin-bottom: 20px;
}

.main-content {
  flex: 1;
  box-sizing: border-box;
}

.content {
  display: flex;
  justify-content: space-between;
}

.menu {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-row {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.notifications {
  /* flex: 1; */
  width: 40%;
  padding-left: 10px;
  margin-right: 10px;


  ::-webkit-scrollbar {
    width: 2px;
  }
}

.notifications1 {
  flex: 1;
  ::-webkit-scrollbar {
    width: 2px;
  }
  /* padding-left: 20px; */
  /* max-width: 750px; */
  /* min-width: 620px; */

}

.notification-item {
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-bottom: 10px;
}

.notification-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 8px;
  /* 可选的圆角边框 */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  /* 保持空间在两者之间 */
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
}

.modal-title {
  flex-grow: 1;
  /* 让标题占据剩余空间 */
  text-align: center;
  /* 水平居中标题文本 */
}

.close-button {
  cursor: pointer;
  /* 鼠标悬停时显示指针手势 */
}

.modal-body {
  height: 600px;
  /* 限制最大高度 */
  overflow-y: auto;
  /* 允许垂直滚动 */
  overflow-x: auto;
  /* 允许水平滚动 */
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
}

/* 可选的滚动条样式 */
.modal-body::-webkit-scrollbar {
  width: 5px;
  /* 滚动条宽度 */
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 滚动条颜色 */
  border-radius: 3px;
  /* 滚动条圆角 */
}

.modal-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 滚动条轨道颜色 */
}

.content1 {
  flex: 1;
  overflow-y: auto;
  padding-right: 3px;
}

.approval-table {
  width: 100%;
  /* w100: 宽度为100% */
  background-color: #fff;
  /* bgff: 背景色为白色 */
  border-radius: 20px;
  /* br-20: 边框半径为20px */
  height: 420px;
}

.approval-table-height {
  height: 400px;
}


.approval-header {
  display: flex;
  background-color: #f8f8f8;
  padding: 10px;
  font-weight: bold;
  justify-content: space-between;
}

.approval-header span {
  margin-right: 18px;
}

.approval-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
}

.approval-item span {
  flex: 1;
  margin-right: 10px;
}

.empty {
  min-width: 55px;
}

.review-button {
  background-color: #409eff;
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.review-button:hover {
  background-color: #66b1ff;
}

.inforClass {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.inforClass::before {
  content: '';
  width: 5px;
  height: 25px;
  background-color: #419eff;
  margin-right: 10px;
  display: inline-block;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  margin: 0 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
}

.pagination button:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.pagination span {
  margin: 0 10px;
}

.fileImage {
  display: flex;
  overflow-x: auto;
}
</style>
